<template>
  <div>
    
    <h1>{{count}}</h1>
    姓:<input type="text" v-model="xx"><br/>
    名:<input type="text" v-model="mm"><br/>
    姓名：<input type="text" v-model="fun">
    <!-- <p>{{fun}}</p>
    <p>{{fun}}</p>
    <p>{{fun}}</p>
    <p>{{fun}}</p>
    <p>{{fun}}</p> -->



  </div>
</template>

<script>
// import { computed } from 'vue';
export default {
  name: 'VueliDemoApp',

  data() {
    return {
      num1:50,
      num2:80,
      xx:"",
      mm:"",
      
    };
  },
  computed:{
    count(){
      return this.num1+this.num2     
    },
    // fun(){
    //   return this.xx+this.mm
    // }
    fun:{
      get(){
        return this.xx+"."+this.mm
        
      },
      set(val){
        //给自己的依赖性赋值
        this.xx = val && val.split('.')[0] || ''
        this.mm = val && val.split('.')[1] || ''

      }
    }
  },

  mounted() {
    
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

</style>